<script setup>
import { ref } from 'vue'

let arr = [
  {
    id:1,
    title:'天天向上',
    author:'bbbbbb',

    
  },
  {
    id:2,
    title:'夏天',
    author:'bbbbbb',

    
  },
  {
    id:3,
    title:'aaa',
    author:'bbbbbb',
    
  },
  {
    id:4,
    title:'222',
    author:'bbbbbb',
    
  }
]
let blog = ref ({
  id:0,
  title:'',
  author:''

})

let blogs = ref(arr)
let isSeen = ref (false)
let keyword = ref()


function btuAdd (){
  console.log("新增");

  // blog.value.id=0
  // blog.value.title=''
  // blog.value.author=''
  blog.value={}

  
  isSeen.value = true
  

}
function btuDel (id){
  console.log("删除");
  let idx  = blogs.value.findIndex(item=>item.id===id)


  blogs.value.splice(idx, 1 )
  
}
function btuGuo (){
  console.log("过滤");
  console.log(keyword);
  
  let tmpArr = blogs.value.filter(item=>item.title.includes(keyword.value))

  blogs.value = tmpArr
}

function btuEdit (id){
  console.log(id);
  let tmpArr=blogs.value.filter(item=>item.id===id)
  console.log(tmpArr);
  if (tmpArr.length>0) {
    let tmobj=tmpArr[0];
    console.log(tmobj);
    blog.value={
      id:tmobj.id,
      title:tmobj.title,
      author:tmobj.author
    }
  }


  isSeen.value = true
  
}
function btuSave (){
  console.log("确认");
  isSeen.value = false

  console.log(blog.value);
  
  if (blog.value.id>0) {
    let tmpArr=blogs.value.filter(item=>item.id===blog.value.id)
    if (tmpArr.length>0) {
      let tmobj=tmpArr[0]

      tmobj.title=blog.value.title;
      tmobj.author= blog.value.author;

    }
  }else{
    let ids = blogs.value.map(item=>item.id)
  console.log(ids);
  
  let  maxId = Math.max(...ids)

  blog.value.id = maxId +1

  blogs.value.push(blog.value)
  }


  
}
function btuCancel (){
  console.log("取消");
  isSeen.value = false
}
</script>

<template>
  <div id="content">

    <div v-show="isSeen" class="OrEdit other">
      <form>
        <table>
          <tbody>
            <tr>
              <td><label for="">标题</label></td>
              <td><input type="text" v-model="blog.title"></td>
            </tr>
            <tr>
              <td><label for="">标题</label></td>
              <td><input type="text" v-model="blog.author"></td>
            </tr>
            <tr>
              <td><input type="button" value="保存" @click="btuSave"></td>
              <td><input type="button" value="取消" @click="btuCancel"></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div>
      <input type="text" placeholder="请输入您要查找的文字" v-model="keyword">
      <input type="button" value="过滤" @click="btuGuo">
      <input type="button" value="新增" @click="btuAdd">
    </div>
    <div id="list">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>作者</th>
            <th>内容</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="blog in blogs" :key="blog.id">
            <th>{{ blog.id }}</th>
            <th>{{blog.title}}</th>
            <th>{{ blog.author }}</th>
            <th>
              <input type="button" value="修改" @click="btuEdit(blog.id)">
              <input type="button" value="删除" @click="btuDel(blog.id)">
            </th>
          </tr>
          <tr>
            <th>1</th>
            <th>刘兴国</th>
            <th>sbbbbbbbb</th>
            <th>
              <input type="button" value="修改" @click="btuEdit">
              <input type="button" value="删除" @click="btuDel">
            </th>
          </tr>
          <tr>
            <th>1</th>
            <th>刘兴国</th>
            <th>sbbbbbbbbbb</th>
            <th>
              <input type="button" value="修改" @click="btuEdit">
              <input type="button" value="删除"  @click="btuDel">
            </th>
          </tr>
          <tr>
            <th>1</th>
            <th>刘兴国</th>
            <th>sbbbbbbbbbb</th>
            <th>
              <input type="button" value="修改" @click="btuEdit">
              <input type="button" value="删除"  @click="btuDel">
            </th>
          </tr>  <tr>
            <th>1</th>
            <th>刘兴国</th>
            <th>sbbbbbbbbbbbbbbbbb</th>
            <th>
              <input type="button" value="修改" @click="btuEdit">
              <input type="button" value="删除"  @click="btuDel">
            </th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</template>